<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>vant3</title>
    <link rel="stylesheet" href="./style/index.css"/>
    <link rel="stylesheet" href="./style/base.css"/>
    <script src="./js/vue@3.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/areaList.js"></script>
    <script src="./js/dayjs.min.js"></script>
</head>
<body>
<div id="app">
    <page-header :title="title"></page-header>
    <div class="main form-main">
        <van-form @submit="onSubmit" ref="formRef">
            <van-cell-group inset>
                <van-field
                        v-model="form.name"
                        name="name"
                        label="姓名"
                        placeholder="请输入姓名"
                        :rules="[{ required: true, message: '请填写姓名' }]"
                ></van-field>
                <van-field
                        v-model="form.phone"
                        name="phone"
                        label="手机号"
                        placeholder="请输入手机号"
                        type="tel"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                ></van-field>
                <van-field name="gender" label="性别">
                    <template #input>
                        <van-radio-group v-model="form.gender" direction="horizontal">
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-model="form.area"
                        is-link
                        readonly
                        name="area"
                        label="地址"
                        placeholder="点击选择地址"
                        @click="showArea = true"
                        :rules="[{ required: true, message: '请选择上报区域' }]"
                ></van-field>
                <van-popup v-model:show="showArea" position="bottom">
                    <van-area
                            :area-list="areaList"
                            @confirm="onConfirm"
                            @cancel="showArea = false"
                            value="230102"
                    ></van-area>
                </van-popup>
                <van-field
                        v-model="form.politicsStatus"
                        is-link
                        readonly
                        name="politicsStatus"
                        label="政治面貌"
                        placeholder="请选择政治面貌"
                        @click="showPicker = true"
                        :rules="[{ required: true, message: '请选择政治面貌' }]"
                ></van-field>
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker
                            :columns="columns"
                            @confirm="onPickerConfirm"
                            @cancel="showPicker = false"
                    ></van-picker>
                </van-popup>
                <van-field
                        v-model="form.birth"
                        is-link
                        readonly
                        name="birth"
                        label="出生日期"
                        placeholder="请选择出生日期"
                        @click="showDatePicker = true"
                        :rules="[{ required: true, message: '请选择出生日期' }]"
                ></van-field>
                <van-popup v-model:show="showDatePicker" position="bottom">
                    <van-datetime-picker
                            type="date"
                            v-model="currentDate"
                            title="选择出生日期"
                            @confirm="onDatePickerConfirm"
                            @cancel="showDatePicker = false"
                            :min-date="minDate"
                    ></van-datetime-picker>
                </van-popup>
                <van-field name="avatar" label="头像" :upload-icon="user-o">
                    <template #input>
                        <van-uploader v-model="form.avatar" :max-count="1">
                            <template #default>
                                <van-image
                                        round
                                        width="6rem"
                                        height="6rem"
                                        src="./images/avatar.png"
                                />
                            </template>
                        </van-uploader>
                    </template>
                </van-field>
                <van-field
                        v-model="form.remark"
                        rows="2"
                        autosize
                        label="备注"
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入备注"
                        show-word-limit
                ></van-field>
            </van-cell-group>
            <div style="margin: 16px;" class="dialog-control">
                <van-button round block type="primary" size="small" native-type="submit">
                    提交
                </van-button>
                <van-button round block type="default" size="small" @click="onReset">
                    重置
                </van-button>
            </div>
        </van-form>
    </div>
    <div class="main-footer">
        <page-footer></page-footer>
    </div>
</div>

<script>
    // optionAPI
    const FormVueApp = {
        name: 'FormView',
        data() {
            return {
                title: 'Vant-表单',
                showArea: false,
                form: {
                    gender: '1'
                },
                areaList: AreaList,
                showPicker: false,
                columns: [
                    '中共党员',
                    // '中共预备党员',
                    '共青团员',
                    '民革会员',
                    '民盟盟员',
                    '民建会员',
                    '民进会员',
                    '农工党党员',
                    '致公党党员',
                    '九三学社社员',
                    '台盟盟员',
                    '无党派民主人士',
                    '群众',
                    '外籍',
                    '其他'
                ],
                showDatePicker: false,
                minDate: new Date(1900, 0, 1),
                currentDate: new Date()
            }
        },
        mounted() {
            // console.log(this.list)
            this.init()
        },
        methods: {
            init() {},
            onSubmit() {
                // console.log(this.form)
                $request.post('report/add', { ...this.form }).then(res => {
                    // console.log(res)
                    if (res) {
                        setTimeout(function () {
                            vant.Toast.success('添加成功')
                        }, 200)
                    }
                })
            },
            onConfirm (areaValues) {
                this.showArea = false;
                this.form.area = areaValues
                    .filter((item) => !!item)
                    .map((item) => item.name)
                    .join('/');
            },
            onPickerConfirm (value) {
                this.form.politicsStatus = value
                this.showPicker = false
            },
            onDatePickerConfirm (value) {
                console.log(value)
                this.form.birth = dayjs(value).format('YYYY-MM-DD')
                this.showDatePicker = false

            },
            onReset () {
                this.form = {
                    gender: '1'
                }
                // console.log(this.$refs.formRef)
                // this.$refs.formRef.resetValidation()
            }
        }
    }

    const app = Vue.createApp(FormVueApp)
    app.use(vant);
    // app.use(vant.Lazyload); // 如果需要懒加载需要单独引入
    app.component('PageHeader', PageHeader)
    app.component('PageFooter', PageFooter)
    app.mount('#app')


</script>
</body>
</html>
